<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>韧在维达，乐在全家</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no"/>
    <link href="./js/app.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
    <script src="./js/webuploader.html5only.js"></script>
</head>
<script src="./js/app.js">
</script>
<body style="margin: 0;padding: 0;">

<img id="guize-image" src="https://bzweida.oss-cn-beijing.aliyuncs.com/weida/shangchuan.png" style="width: 100%;height: auto;position: absolute;">
<form id="form" action="/weidai/api/upload_content" method="post" enctype="multipart/form-data" >
<div style="flex-direction: column;display: flex;align-items: center;;;width: 100%;height: 80em;;position: absolute;top: 0;left: 0;z-index: 100;">
    <div style="width: 24em;;height: 9.3em;;margin-top: 31.4em;;display: flex;justify-content: center;align-items: center;">

        <div style="height: 100%;flex: 1;border: none">
            <img id="select-image" src="" style="width: 100%;height: 100%;border: none;">
        </div>
        <div id="upload-click" style="height: 100%;flex: 1.5;background-color: darkgreen;opacity: 0">
            <div style="width: 100%;height: 8em;background-color: red">
            </div>
            <!--<input type="file" name="multipartFile" id="choose" accept="image/*" style="height: 100%;width: 100%;opacity: 0">-->
        </div>

    </div>
    <div  style="width: 20em;height: 3.5em;;margin-top: 4.5em;">
        <input id="content-input" name="contentInput" style=";width: 100%;height: 100%;background-color: transparent;border-radius: 0;border: none;font-size: 2em;color: white">
    </div>
    <div id="sub-click" style="width: 20em;height: 4.5em;;margin-top: 25.5em;">

    </div>

</div>
    </form>
<script>

    $(document).ready(function () {


        var cphoe =window.localStorage.phone;
        if(!cphoe){
            window.location.href = './index.html';
            return;
        }
        $('#sub-click').click(function () {
            if(uploading == false){
                alert('请上传图片!');
                return;
            }
            var content =  $('#content-input').val();
            if(content.length == 0){
                alert('请输入竞选宣言！');
                console.log(content);
                return;
            }
            $.post(api.upload_content+'?contentInput='+content,function (res) {
                window.location.href = './paiming.html'
            })
        })


//upload pic


        var uploading = false;

        var uploader = WebUploader.create({
            // 选完文件后是否自动上传
            auto:true,

            // 文件接收的服务端路径
                server:api.upload,

            // 选择文件的按钮
            pick:'#upload-click',

            // 只允许选择图片文件
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png' //如果写成image/*会出现响应慢的问题
            },

            // 配置生成缩略图的选项
            thumb:{
                // 缩略图的宽高，当取值介于0-1时，被当成百分比使用
                width:500,
                height:250,
                // 强制转换成指定的类型
                // 图片质量，只有type为image/jpeg的时候才有效
                quality:70,
                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
                allowMagnify:true,
                // 是否允许裁剪
                crop:true
            },

            // 是否压缩图片, 默认如果是jpeg文件上传前会压缩，如果是false, 则图片在上传前不进行压缩
            compress:{
                // 压缩后的尺寸
                // 图片质量，只有type为image/jpeg的时候才有效。
                quality: 90,
                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
                allowMagnify: false,
                // 是否允许裁剪
                crop: false,
                // 是否保留头部meta信息
                preserveHeaders: true,
                // 如果发现压缩后文件大小比原来还大，则使用原来图片，此属性可能会影响图片自动纠正功能
                noCompressIfLarger: false,
                // 单位字节，如果图片大小小于此值，不会采用压缩
                compressSize: 0
            }
        });
        uploader.option( 'compress', {
            width: 720,
            height: 600
        });
        // 监听fileQueued事件来处理UI逻辑，当有一批文件被添加进队列改用filesQueued
        uploader.on('fileQueued', function( file ) {
            // 可以在控制台中查看file对象的详细信息
            console.log(file);
            // 创建缩略图 makeThumb，还可以写成(file,callback,width,height)
            uploader.makeThumb(file,function(error,src) {
                if (error) {
                    return;
                }else{
                    $("#select-image").attr('src',src);
                }
            });
        });
        // 文件上传开始
        uploader.on('startUpload', function(file) {
        });
        // 文件上传进度
        uploader.on('uploadProgress', function(file,percentage) {
        });
        // 文件上传成功
        uploader.on('uploadSuccess', function(file) {
            uploading = true;
        });
        // 文件上传失败
        uploader.on('uploadError', function(file) {
            alert('上传失败!');
            uploading = false;
        });
        // 文件上传完成
        uploader.on('uploadComplete', function(file) {
            uploading = true;
        });


    })

</script>
</body>


</html>
